<template>
  <div id="container"></div>
</template>
<script>
import { initLine } from "@/util/carTrajectory";
import AMapLoader from "@amap/amap-jsapi-loader";
import { getOrderList } from '../../../api';
// import { getPosition } from "../Model/getPosition";
// import { getPosition } from "../Model/getPosition.js";
window._AMapSecurityConfig = {
  securityJsCode: "237716e4a44b4c1b1e45e9280e7f189f"
};
export default {
  name: "vehicleOrderMap",
  data() {
    return {
      map: null,
      trajectory: [],
      trajectoryList: [],
      orderId: 0
    };
  },
  // props: {
  //   trajectory: {
  //     type: Array,
  //     default: () => []
  //   },
  //   orderId: {
  //     type: Number,
  //     default: 0
  //   }
  // },
  watch: {
    trajectory(newVal) {
      this.trajectoryList = newVal; // 变化一次就更新一次
    }
  },
  mounted() {
    this.initOrderMap();
  },
  methods: {
    // 初始化地图
    initOrderMap() {
      AMapLoader.load({
        key: "3ec0f4b64da67a9e6ade01ba12078cf8", // 设置您的key
        version: "2.0",
        plugins: [
          "AMap.ToolBar",
          "AMap.Driving",
          "AMap.CitySearch",
          "AMap.Geocoder",
          "AMap.PlaceSearch"
        ],
        AMapUI: {
          version: "1.1",
          plugins: []
        },
        Loca: {
          version: "2.0"
        }
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            viewMode: "3D",
            zoom: 11
          });
          /** 初始化轨迹线 */
          getOrderList(this.$cookie.get('userId'), 0).then(({data}) => {
            // console.log('data', data);
            // console.log('data.data[0]', data.data[0]);
            // console.log('获取数据库中的经纬度', JSON.parse(data.data[0].trajectory));
            // console.log('类型', typeof JSON.parse(data.data[0].trajectory));
            if(JSON.parse(data.data[0].trajectory) !== null && JSON.parse(data.data[0].trajectory) !== "" && JSON.parse(data.data[0].trajectory) !== undefined) {
              this.trajectoryList = JSON.parse(data.data[0].trajectory);
            }else {
              this.trajectoryList = [[113.38789179343895,23.19592292691222]];
            }
            // getPosition(this.trajectoryList, data.data[0].id, this.map);
            initLine(this.map, this.trajectoryList);
          })
        })
        .catch((e) => {
          console.log(e);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
#container /deep/ {
  width: 100%;
  height: 100%;
  background-color: pink;
  // 去掉高德地图logo和版权信息
  .amap-logo {
    display: none;
    opacity: 0 !important;
  }
  .amap-copyright {
    opacity: 0;
  }
}
</style>